<template>
  <h2>demo15-composition-demo02-watch.vue</h2>
  <zhtt-card title="userinfo默认值为null">
    userInfo：{{userInfo}}<br/>
    userinfo变化次数：{{userInfoMonitor}}<br/>
    <button class="zhtt-btn" @click="request()">请求接口</button>
    <button class="zhtt-btn" @click="request2()">不请求接口</button>
    <button class="zhtt-btn" @click="request()">setup请求接口</button>
  </zhtt-card>
</template>
<script>
import { ref, watch } from 'vue';
export default {
  data(){
    return{
      userInfo:ref({}),
      userInfoMonitor:0,
    }
  },
  watch:{
    userInfo(newValue, oldValue){
      console.log('newValue: ' , JSON.stringify(newValue));
      console.log('oldValue: ' , JSON.stringify(oldValue));
    }
  },
  methods:{
    request(){
      fetch('/api/get').then(res=>res.json()).then(data=>{
        this.userInfo = data;
        console.log('mockdata',data);
      });
    },
    request2(){
      this.userInfo = {name:123};
    }
  },
}
</script>
